<template>
  <div>
    <div class="play-card">
      <img src="../assets/img/shengbo.png" alt="" />
      <div class="back"></div>
      <p class="song-name">一路向北-周杰伦</p>
      <p class="song-word">我一路向北离开有你的季节</p>
      <div class="song-play-box">
        <o-audio></o-audio>
        <div style="margin-right: auto"></div>
        <div></div>
      </div>
    </div>
    <div class="head-list-title">
      <!-- 图标 -->
      <svg-icon name="fire" w="18px" h="18px"></svg-icon>
      <p>推荐热门主播</p>
    </div>
    <swiper
      :slides-per-view="5"
      :space-between="16"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
    >
      <swiper-slide>
        <div class="head-img">
          <img src="../assets/img/touxiang.png" alt="" @click="goneDetail" />
        </div>
        <p>eee</p>
      </swiper-slide>
      <swiper-slide>
        <div class="head-img">
          <img src="../assets/img/touxiang.png" alt="" @click="goneDetail" />
        </div>
        <p>薛定谔的猫</p>
      </swiper-slide>
      <swiper-slide>
        <div class="head-img">
          <img src="../assets/img/touxiang.png" alt="" @click="goneDetail" />
        </div>
        <p>薛定谔的猫猫猫猫</p>
      </swiper-slide>
      <swiper-slide>
        <div class="head-img">
          <img src="../assets/img/touxiang.png" alt="" @click="goneDetail" />
        </div>
        <p>eee</p>
      </swiper-slide>
      <swiper-slide>
        <div class="head-img">
          <img src="../assets/img/touxiang.png" alt="" @click="goneDetail" />
        </div>
        <p>eee</p>
      </swiper-slide>
      <swiper-slide>
        <div class="head-img">
          <img src="../assets/img/touxiang.png" alt="" @click="goneDetail" />
        </div>
        <p>eee</p>
      </swiper-slide>
    </swiper>

    <div class="room-title" style="margin-left: 16px">
      <p>推荐直播</p>
      <p>推荐直播</p>
      <p>推荐直播</p>
    </div>
    <div class="room-list">
      <div class="room-item">
        <img src="../assets/img/touxiang.png" alt="" />
        <div class="room-msg">
          <p>薛定月的猫</p>
          <div style="margin-right: auto"></div>
          <svg-icon name="eye" w="12px" h="12px"></svg-icon>
          <p>6852</p>
        </div>
      </div>
      <div class="room-item">
        <img src="../assets/img/touxiang.png" alt="" />
        <div class="room-msg">
          <p>薛定月的猫</p>
          <div style="margin-right: auto"></div>
          <svg-icon name="eye" w="12px" h="12px"></svg-icon>
          <p>6852</p>
        </div>
      </div>
      <div class="room-item">
        <img src="../assets/img/touxiang.png" alt="" />
        <div class="room-msg">
          <p>薛定月的猫</p>
          <div style="margin-right: auto"></div>
          <svg-icon name="eye" w="12px" h="12px"></svg-icon>
          <p>6852</p>
        </div>
      </div>
      <div class="room-item">
        <img src="../assets/img/touxiang.png" alt="" />
        <div class="room-msg">
          <p>薛定月的猫</p>
          <div style="margin-right: auto"></div>
          <svg-icon name="eye" w="12px" h="12px"></svg-icon>
          <p>6852</p>
        </div>
      </div>
      <div class="room-item">
        <img src="../assets/img/touxiang.png" alt="" />
        <div class="room-msg">
          <p>薛定月的猫</p>
          <div style="margin-right: auto"></div>
          <svg-icon name="eye" w="12px" h="12px"></svg-icon>
          <p>6852</p>
        </div>
      </div>
      <div class="room-item">
        <img src="../assets/img/touxiang.png" alt="" />
        <div class="room-msg">
          <p>薛定月的猫</p>
          <div style="margin-right: auto"></div>
          <svg-icon name="eye" w="12px" h="12px"></svg-icon>
          <p>6852</p>
        </div>
      </div>
      <div class="room-item">
        <img src="../assets/img/touxiang.png" alt="" />
        <div class="room-msg">
          <p>薛定月的猫</p>
          <div style="margin-right: auto"></div>
          <svg-icon name="eye" w="12px" h="12px"></svg-icon>
          <p>6852</p>
        </div>
      </div>
      <div class="room-item">
        <img src="../assets/img/touxiang.png" alt="" />
        <div class="room-msg">
          <p>薛定月的猫</p>
          <div style="margin-right: auto"></div>
          <svg-icon name="eye" w="12px" h="12px"></svg-icon>
          <p>6852</p>
        </div>
      </div>
    </div>
  </div>
</template> 

<script lang="ts">
import { reactive } from "vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import router from "../router";
import "swiper/css";
import OAudio from "../components/musicPlay/index.vue";

export default {
  components: {
    Swiper,
    SwiperSlide,
    OAudio,
  },
  setup() {
    const state = reactive({
      sliderValue: 50,
      isPlay: false,
    });
    const onSwiper = (swiper: any) => {
      console.log(swiper);
    };
    const onSlideChange = () => {
      console.log("slide change");
    };
    const goneDetail = () => {
      router.push("/detail");
    };
    const changeSpeed = (value: any) => {
      console.log(state.sliderValue);
    };
    return {
      state,
      onSwiper,
      onSlideChange,
      goneDetail,
      changeSpeed,
    };
  },
};
</script>




<style lang="less" scoped>
.play-card {
  padding: 16px;
  box-sizing: border-box;
  height: 100px;
  width: 100%;
  position: relative;
  img {
    height: 125px;
    width: 125px;
    position: absolute;
    right: 10px;
    top: -20px;
    z-index: -2;
  }
  .back {
    background: rgb(226, 221, 255);
    background: linear-gradient(
      112deg,
      rgba(226, 221, 255, 1) 6%,
      rgba(193, 241, 219, 1) 31%,
      rgba(254, 218, 233, 1) 53%,
      rgba(255, 254, 224, 1) 71%,
      rgba(233, 255, 224, 1) 86%
    );
    opacity: 0.7;
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    transform: translate(-16px, -16px);
  }
  .song-play-box {
    margin-top: 16px;
    display: flex;
    align-items: center;
    .song-slider {
      width: 75%;
    }
  }

  .song-name {
    color: #000;
    font-weight: 600;
    font-size: 16px;
  }
  .song-word {
    color: #707070;
    margin-top: 5px;
    font-size: 14px;
    letter-spacing: 2px;
  }
}
.head-list-title {
  display: flex;
  margin: 20px 0 0 16px;
  align-items: center;
  p {
    font-size: 17px;
    color: #121212;
    letter-spacing: 2px;
    margin-left: 6px;
  }
}
.swiper {
  margin: 16px 0 0 16px;
}
.swiper-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 60px;
  .head-img {
    height: 60px;
    width: 60px;
    border-radius: 50%;
    overflow: hidden;
    img {
      height: 100%;
      width: 100%;
    }
  }
  p {
    margin-top: 8px;
    color: #a0a0a0;
    font-size: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 60px;
    text-align: center;
  }
}
.room-title {
  margin: 24px 0 0 16px;
  position: relative;
  height: 18px;
  p {
    font-size: 18px;
    font-weight: 600;
    position: absolute;
  }
  p:nth-child(1) {
    color: #eb2f87;
    transform: translateY(1px);
  }
  p:nth-child(2) {
    color: #30f8e4;
    transform: translatey(-1px);
  }
  p:nth-child(3) {
    color: #5657f8;
  }
}
.room-list {
  margin: 18px 16px 0 16px;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-row-gap: 8px;
  grid-column-gap: 8px;
  .room-item {
    height: 160px;
    width: 160px;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    img {
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 1;
    }
    .room-msg {
      z-index: 2;
      position: absolute;
      bottom: 8px;
      display: flex;
      margin: 0 12px;
      width: calc(100% - 24px);
      align-items: center;
      .svg-icon {
        margin-right: 4px;
      }
      p {
        color: #fff;
        font-size: 10px;
      }
    }
  }
}
</style>